<template>
  <div class="nav" v-tab-current="{
    curIndex,
    className: 'nav-item',
    currentClassName: 'selected',
  }">
    <nav-item
      v-for="(item, index) in navData"
      :key="index"
      :item="item"
      :index="index"
      :curIndex="curIndex"
      :bgc="bgc"
      @changeTabIndex="changeTabIndex"
    ></nav-item>
  </div>
</template>
 
<script>
import NavItem from './Item.vue'
import TabCurrent from './directives/tabCurrent'
export default {
  name: 'Nav',
  props: {
    navData: Array,
    curIndex: Number,
    bgc: String
  },
  components: {
    NavItem,
  },
  directives: {
    TabCurrent,
  },
  methods: {
    changeTabIndex (index) {
      this.$emit('changeTabIndex', index)
    }
  }
}
</script>

<style lang="less" scoped>
.nav {
  height: 50px;
  border-bottom: 1px solid #333;
  display: flex;
  justify-content: space-between;
  text-align: center;
  line-height: 50px;
  .nav-item {
    flex: 1;
    cursor: pointer;
  }
}
</style>